<template>
	<view>
		<!-- #ifdef APP-PLUS -->
		<view>
			<uni-nav-bar title="上传商品" :statusBar='true' :fixed="true"></uni-nav-bar>
		</view>
		<!-- #endif -->
		<view class="addgoods">
			<view class="addgoods-content">
				<view class="addgoods-content-name">
					<text class="addgoods-content-name-txt">商品</text>
					<view class="addgoods-content-name-input">
						<input placeholder="请输入商品名称" v-model="name" class="addgoods-content-name-input-content" />
						<image v-if='name' class="addgoods-content-name-input-close" src="../../static/index/icon-del.png" @click="name = ''"></image>
					</view>
				</view>
				<view class="addgoods-content-name">
					<text class="addgoods-content-name-txt">分类</text>
					<view class="addgoods-content-name-input">
						<picker class="addgoods-content-name-input-content" mode="selector" :range="classification" range-key="name" :value="indexs" @change="bindPickerChange">
							<view class="uni-input">{{ classification[indexs].name }}</view>
						</picker>
						<image class="addgoods-content-name-input-close" src="../../static/index/icon-arrow-down.png"></image>
					</view>
				</view>
				<view class="addgoods-content-select">
					<view class="addgoods-content-select-top">
						<text class="addgoods-content-select-top-txt">是否卡券</text>
						<view class="addgoods-content-select-top-select">
							<view class="addgoods-content-select-top-select-item" @click="isCoupon = 0">
								<view class="addgoods-content-select-top-select-item-img" :class="isCoupon === 0 ? 'active':''">
									<view></view>
								</view>
								<text class="addgoods-content-select-top-select-item-txt">否</text>
							</view>
							<view class="addgoods-content-select-top-select-item" @click="isCoupon = 1">
								<view class="addgoods-content-select-top-select-item-img" :class="isCoupon === 1 ? 'active':''">
									<view></view>
								</view>
								<text class="addgoods-content-select-top-select-item-txt">是</text>
							</view>
						</view>
					</view>
					<view class="addgoods-content-select-bottom">*电影票，加油卡，理发卡等选择【是】</view>
				</view>
				<view class="addgoods-content-name">
					<text class="addgoods-content-name-txt">原价</text>
					<view class="addgoods-content-name-input">
						<input placeholder="请输入商品原价" v-model="price" class="addgoods-content-name-input-content" />
						<image class="addgoods-content-name-input-close" src="../../static/index/icon-del.png" @click="price = ''"></image>
					</view>
				</view>
				<view class="addgoods-content-name">
					<text class="addgoods-content-name-txt">库存</text>
					<view class="addgoods-content-name-input">
						<input placeholder="请输入商品库存数量" v-model="stock" class="addgoods-content-name-input-content" />
						<image class="addgoods-content-name-input-close" src="../../static/index/icon-del.png" @click="stock = ''"></image>
					</view>
				</view>
				<view class="addgoods-content-goodsimg">
					<text class="addgoods-content-goodsimg-txt">商品图片</text>
					<view class="addgoods-content-goodsimg-list">
						<view class="addgoods-content-goodsimg-list-content" v-for="(item, index) of goodsArr" :key="index">
							<image @click="uploadImg(index)" class="addgoods-content-goodsimg-list-content-img" :src="item"></image>
							<image @click="onClickClearImg(index)" src="../../static/addgoods/close.png" class="addgoods-content-goodsimg-list-content-img-close"></image>
						</view>
						<view class="addgoods-content-goodsimg-list-add" @click="uploadImg()">
							<image class="addgoods-content-goodsimg-list-add-img" src="../../static/index/icon-add.png"></image>
						</view>
					</view>
				</view>
				<view class="addgoods-content-jj">
					<text class="addgoods-content-jj-txt">简介</text>
					<textarea class="addgoods-content-jj-content" maxlength="200" v-model="introduction" placeholder="简介（不超过200字）" />
				</view>
			</view>
			<view class="addgoods-handle">
				<view class="addgoods-handle-left addgoods-handle-left" @click="shangjiaFun(0)">下架/入库</view>
				<view class="addgoods-handle-left addgoods-handle-right" @click="shangjiaFun(1)">上架</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue'
	import { config } from '@/utils/config.js'
	import { myMixin } from '@/utils/mixin.js'
	export default {
		mixins: [myMixin],
		data() {
			return {
				classification: [], // 行业
				indexs: 0, // 行业的索引
				
				
				name: '',
				categoryId: undefined, // 商品分类的id
				isCoupon: 0, // 选择卡券 0否 1是
				price: '', // 商品原价
				stock: '', // 库存
				introduction: '',
				goodsArr: [], // 上传图片的临时
				
				id: ''
			}
		},
		components: {
			uniNavBar
		},
		onLoad(e) {
			const token = uni.getStorageSync('h_token')
			if (!token) {
				uni.showToast({
					icon: 'none',
					title: '尚未登录, 请先登录'
				})
				setTimeout(() => {
					uni.removeStorageSync('h_role')
					uni.removeStorageSync('h_memberId')
					uni.removeStorageSync('h_token')
					uni.removeStorageSync('h_openId')
					uni.reLaunch({
						url: '../verificationcodelogin/verificationcodelogin'
					})
				}, 777)
				return false
			}
			if (e && e.id) {
				this.id = e.id
			}
			this._getAllHYData()
		},
		methods: {
			// 得到所有的商品分类
			_getAllHYData() {
				uni.request({
					url: `${config.api_base_url}merchant/goods/goodsCategory`,
					header: {
						AUTH: 'ROBOT ' + uni.getStorageSync('h_token')
					},
					success: ((res) => {
						let { status, data } = res.data
						if (status.flag === true) {
							const classification = []
							for (const item of data) {
								if (item.id && item.name) {
									classification.push({ id: item.id, name: item.name })
								}
							}
							this.classification = classification
							if (!this.id) {
								this.categoryId = this.classification[0].id
								this.indexs = 0
							}
						} else {
							this.classification = []
							this.categoryId = undefined
						}
					}),
					fail: (() => {
						uni.showToast({
							icon: 'none',
							title: '查询行业失败, 网络异常'
						})
					}),
					complete: (() => {
						if (this.id) {
							this._getDetailGoodById()
						}
					})
				})
			},
			_getDetailGoodById() {
				uni.request({
					url: `${config.api_base_url}merchant/goods/findGoodsById/${this.id}`,
					header: {
						AUTH: 'ROBOT ' + uni.getStorageSync('h_token')
					},
					success: ((res) => {
						let { status, data } = res.data
						if (status.flag === true) {
							this.name = data.name
							this.categoryId = data.categoryId
							this.isCoupon = Number(data.isCoupon)
							this.price = data.price
							this.stock = data.stock
							this.introduction = data.introduction
							const myIndex = this.classification.findIndex((item) => item.id === this.categoryId)
							this.indexs = myIndex
							const imgs = JSON.parse(data.images)
							const imgsArr = Object.values(imgs)
							for (const index in imgsArr) {
								imgsArr[index] = config.my_img_url + imgsArr[index]
							}
							this.goodsArr = imgsArr
						} else {
							this.name = ''
							this.categoryId = undefined
							this.isCoupon = 0
							this.price = ''
							this.stock = ''
							this.introduction = ''
							this.indexs = 0
							this.goodsArr = []
						}
					}),
					fail: (() => {
						uni.showToast({
							icon: 'none',
							title: '查询失败, 网络异常'
						})
					})
				})
			},
			// 行业的change
			bindPickerChange(e) {
				this.indexs = e.detail.value
				this.categoryId = this.classification[this.indexs].id
			},
			uploadImg(index) {
				if (!index) {
					if (index !== 0) {
						if (this.goodsArr.length >= 5) {
							uni.showToast({
								icon: 'none',
								title: '最多上传5张, 可先删除再上传'
							})
							return false
						}
					}
				}
				uni.chooseImage({
					count: 1,
					success: ((res) => {
						const tempFilePaths = res.tempFilePaths
						uni.uploadFile({
							url: config.api_base_url_tools + 'oss/upload',
							filePath: tempFilePaths[0],
							name: 'file',
							success: ((res_t) => {
								const result = JSON.parse(res_t.data)
								let { status, data } = result
								if (status.flag === true) {
									if (index) {
										this.goodsArr[index] = data
										this.$set(this.goodsArr, index, data);
									} else if (index === 0) {
										this.goodsArr[0] = data
										this.$set(this.goodsArr, 0, data);
									} else {
										this.goodsArr.push(data)
									}
								}
							}),
							fail: (() => {
								uni.showToast({
									icon: 'none',
									title: '上传失败, 网络异常'
								})
							})
						})
					})
				})
			},
			onClickClearImg(index) {
				this.goodsArr.splice(index, 1)
			},
			shangjiaFun(mystatus) {
				if (!this.name) {
					uni.showToast({
						icon: 'none',
						title: '请先填写商品的名字'
					})
					return false
				}
				if (!this.categoryId) {
					uni.showToast({
						icon: 'none',
						title: '请先选择分类'
					})
					return false
				}
				if (this.isCoupon !== 0 && this.isCoupon !== 1) {
					uni.showToast({
						icon: 'none',
						title: '请先选择是否卡券'
					})
					return false
				}
				if (!this.price) {
					uni.showToast({
						icon: 'none',
						title: '请填写原价'
					})
					return false
				}
				if (!this.stock) {
					uni.showToast({
						icon: 'none',
						title: '请填写库存'
					})
					return false
				}
				if (!this.goodsArr.length) {
					uni.showToast({
						icon: 'none',
						title: '请上传商品图片'
					})
					return false
				}
				if (!this.introduction) {
					uni.showToast({
						icon: 'none',
						title: '请填写商品描述'
					})
					return false
				}
				const obj = {}
				obj.name = this.name
				obj.categoryId = this.categoryId
				obj.isCoupon = this.isCoupon
				obj.price = this.price
				obj.stock = this.stock
				obj.images = this.goodsArr.join(',')
				obj.introduction = this.introduction
				obj.onSale = mystatus
				if (this.id) {
					uni.request({
						url: `${config.api_base_url}merchant/goods/updateGoods/${this.id}`,
						method: 'PUT',
						header: {
							AUTH: 'ROBOT ' + uni.getStorageSync('h_token')
						},
						data: obj,
						success: ((res) => {
							let { status, data } = res.data
							if (status.flag === true) {
								const statusTxt = obj.onSale === 0 ? '入库' : '上架'
								uni.showToast({
									icon: 'none',
									title: `${statusTxt}成功`
								})
								setTimeout(() => {
									uni.navigateBack({})
								}, 2222)
							} else {
								uni.showToast({
									icon: 'none',
									title: status.msg
								})
							}
						}),
						fail: (() => {
							const statusTxt = obj.onSale === 0 ? '入库' : '上架'
							uni.showToast({
								icon: 'none',
								title: `${statusTxt}失败, 网络异常`
							})
						})
					})
				} else {
					uni.request({
						url: `${config.api_base_url}merchant/goods/addGoods/`,
						method: 'POST',
						header: {
							AUTH: 'ROBOT ' + uni.getStorageSync('h_token')
						},
						data: obj,
						success: ((res) => {
							let { status, data } = res.data
							if (status.flag === true) {
								const statusTxt = obj.onSale === 0 ? '入库' : '上架'
								uni.showToast({
									icon: 'none',
									title: `${statusTxt}成功`
								})
								setTimeout(() => {
									uni.navigateBack({})
								}, 2222)
							} else {
								uni.showToast({
									icon: 'none',
									title: status.msg
								})
							}
						}),
						fail: (() => {
							const statusTxt = obj.onSale === 0 ? '入库' : '上架'
							uni.showToast({
								icon: 'none',
								title: `${statusTxt}失败, 网络异常`
							})
						})
					})
				}
			}
		}
	}
</script>
<style>
page {
	background-color: #F7F4F8;
}
</style>
<style scoped>
.addgoods {
	width: 100%;
	box-sizing: border-box;
	padding-top: 14rpx;
	padding-left: 16rpx;
	padding-right: 14rpx;
}
.addgoods-content {
	width: 100%;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	padding-top: 32rpx;
	padding-left: 40rpx;
	padding-right: 30rpx;
	background-color: #fff;
	border-radius: 12rpx;
	padding-bottom: 40rpx;
}
.addgoods-content-name {
	display: flex;
	align-items: center;
	margin-bottom: 26rpx;
}
.addgoods-content-name-txt {
	width: 112rpx;
	font-size: 30rpx;
	font-weight: 600;
	line-height: 42rpx;
	color: #333333;
}
.addgoods-content-name-input {
	flex: 1;
	height: 72rpx;
	border-radius: 12rpx;
	border: 2rpx solid rgba(221, 221, 221, 1);
	display: flex;
	align-items: center;
}
.addgoods-content-name-input-content {
	flex: 1;
	height: 100%;
	margin: 0;
	padding: 0;
	outline: none;
	border: none;
	box-sizing: border-box;
	padding-left: 24rpx;
	font-size: 30rpx;
	display: flex;
	align-items: center;
}
.addgoods-content-name-input-close {
	width: 30rpx;
	height: 30rpx;
	border-radius: 50%;
	margin-right: 26rpx;
}
.addgoods-content-select {
	display: flex;
	flex-direction: column;
	margin-bottom: 26rpx;
}
.addgoods-content-select-top {
	display: flex;
	align-items: center;
}
.addgoods-content-select-top-txt {
	font-size: 30rpx;
	font-weight: 500;
	line-height: 42rpx;
	margin-right: 72rpx;
}
.addgoods-content-select-top-select {
	display: flex;
	align-items: center;
}
.addgoods-content-select-top-select-item {
	display: flex;
	align-items: center;
	margin-right: 64rpx;
}
.addgoods-content-select-top-select-item:last-child {
	margin-right: 0;
}
.addgoods-content-select-top-select-item-img {
	width: 34rpx;
	height: 34rpx;
	border-radius: 50%;
	margin-right: 18rpx;
	border: 2rpx solid #C6C6C6;
	display: flex;
	justify-content: center;
	align-items: center;
}
.addgoods-content-select-top-select-item-img.active{
	border: 2rpx solid #F02230;
}
.addgoods-content-select-top-select-item-img.active > view {
	width: 20rpx;
	height: 20rpx;
	border-radius: 100%;
	background-color: #F02230;
}
.addgoods-content-select-top-select-item-txt {
	font-size: 30rpx;
	font-weight: 500;
	color: #333333;
	line-height: 42rpx;
}
.addgoods-content-select-bottom {
	margin-top: 18rpx;
	box-sizing: border-box;
	padding-left: 190rpx;
	font-size: 24rpx;
	color: #6D7278;
	font-weight: 400;
	line-height: 34rpx;
}
.addgoods-content-goodsimg {
	width: 100%;
	margin-top: 26rpx;
	display: flex;
	flex-direction: column;
}
.addgoods-content-goodsimg-txt {
	font-size: 30rpx;
	line-height: 42rpx;
	font-weight: 500;
	color: #333333;
}
.addgoods-content-goodsimg-list {
	margin-top: 22rpx;
	display: flex;
	flex-wrap: wrap;
}
.addgoods-content-goodsimg-list-content {
	display: flex;
	flex-wrap: wrap;
	margin-right: 26rpx;
	margin-bottom: 26rpx;
	position: relative;
}
.addgoods-content-goodsimg-list-content-img {
	width: 154rpx;
	height: 154rpx;
	border-radius: 12rpx;
}
.addgoods-content-goodsimg-list-content-img-close {
	position: absolute;
	right: 0;
	top: 0;
	width: 40rpx;
	height: 40rpx;
	border-radius: 50%;
}
.addgoods-content-goodsimg-list-add {
	width: 154rpx;
	height: 154rpx;
	border-radius: 12rpx;
	background-color: #F0F0F0;
	display: flex;
	justify-content: center;
	align-items: center;
}
.addgoods-content-goodsimg-list-add-img {
	width: 34rpx;
	height: 34rpx;
}
.addgoods-content-jj {
	display: flex;
	flex-direction: column;
	margin-top: 26rpx;
}
.addgoods-content-jj-txt {
	font-size: 30rpx;
	line-height: 42rpx;
	font-weight: 500;
	color: rgba(0, 0, 0, 0.85);
}
.addgoods-content-jj-content {
	margin-top: 12rpx;
	width: 100%;
	height: 230rpx;
	background-color: #F8F8F8;
	box-sizing: border-box;
	padding: 26rpx 30rpx 26rpx 30rpx;
	font-size: 24rpx;
}
.addgoods-handle {
	width: 100%;
	box-sizing: border-box;
	padding-top: 112rpx;
	padding-bottom: 130rpx;
	padding-left: 36rpx;
	padding-right: 44rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.addgoods-handle-left {
	width: 48%;
	height: 82rpx;
	border-radius: 14rpx;
	background-color: #F7B500;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 32rpx;
	font-weight: 500;
	color: #fff;
}
.addgoods-handle-right {
	background-color: #F02230;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 32rpx;
	font-weight: 500;
	color: #fff;
	width: 48%;
	height: 82rpx;
	border-radius: 14rpx;
}
</style>
